<template>
  <!-- 年检信息 -->
  <div class="">
    <el-form :model="detailForm" class="el-form" v-loading="loading" label-width="130px">
      <el-card class="box-card" shadow="never">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年检总次数:">
              <span>{{ detailForm.totalCount }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center" label="序号" width="50">
              </el-table-column>
              <el-table-column align="center" label="操作" width="60">
                <template #default="{row}">
                  <el-button type="text" @click="handleView(row)">查看</el-button>
                </template>
              </el-table-column>
<!--              <el-table-column prop="inspectionStatus" show-overflow-tooltip min-width="100" align="center" label="年检状态">-->
<!--              </el-table-column>-->
              <!--              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="100" align="center" label="实际开始时间">-->
              <!--              </el-table-column>-->
              <!--              <el-table-column prop="actualEndTime" show-overflow-tooltip min-width="100" align="center" label="实际结束时间">-->
              <!--              </el-table-column>-->
              <el-table-column prop="inspectionExpire" show-overflow-tooltip min-width="100" align="center" label="本次年检时间">
                <template slot-scope="{row}">
                  {{ row.inspectionTime ? $dayjs(row.inspectionTime).format('YYYY-MM-DD') : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="onlineOffline" show-overflow-tooltip min-width="100" align="center" label="线上/线下">
                <template #default="{row}">
                  <span v-if="row.onlineOffline == 1">线上</span>
                  <span v-if="row.onlineOffline == 2">线下</span>
                </template>
              </el-table-column>
              <el-table-column prop="carInspectionPerson" show-overflow-tooltip min-width="100" align="center" label="车管负责人">
              </el-table-column>
              <el-table-column prop="priceType" show-overflow-tooltip min-width="100" align="center" label="费用类型">
                <template #default="{row}">
                  <span>车管报销</span>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionIdenUrl" show-overflow-tooltip min-width="120" align="center" label="年检标识">
                <template #default="{row}">
                  <el-popover placement="right"
                              v-if="row.inspectionIdenUrl"
                              trigger="click">
                    <image-common v-model="row.inspectionIdenUrl" :disabled="true" :up-type="2"/>
                    <el-button type="text" slot="reference">查看</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionInvoiceUrl" show-overflow-tooltip min-width="120" align="center" label="年检发票">
                <template #default="{row}">
                  <el-popover placement="right"
                              v-if="row.inspectionInvoiceUrl"
                              trigger="click">
                    <image-common v-model="row.inspectionInvoiceUrl" :disabled="true" :up-type="2"/>
                    <el-button type="text" slot="reference">查看</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" show-overflow-tooltip min-width="100" align="center" label="记录时间">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import {getInspectionMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: "index", //年检信息
  props: ['carId'],
  computed: {
    handlPriceType() {
      return function (val) {
        let obj = {
          1: '年检费',
          2: '年检代办费',
          3: '综合检测',
          4: '二维费用',
        };
        return obj[val];
      };
    },
  },
  watch: {},
  data() {
    return {
      detailForm: {},
      tableData: [],
      loading: false,
    };
  },
  created() {
    this.handleList();
  },
  mounted() {
  },
  methods: {
    async handleList() {
      this.loading = true;
      try {
        const res = await getInspectionMessage({carId: this.carId});
        this.tableData = res.vo || [];
        this.detailForm = res || {}
      } finally {
        this.loading = false;
      }
    },

    handleView(row){
      this.$router.push({
        path: "/clgl/inspectAnnuallyDetails",
        query: {
          id: row.id,
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.el-form {
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>


